<template>
  <div>
    <h1 class="titleCenter">组件的高级用法</h1>
    <hr>
    <componentChild :count="1"></componentChild>

    <h2 class="titleCenter">动态组件</h2>
    <p>
      vue提供了一个特殊的元素
      <b>compontent</b>动态挂载不同的组件使用is特性来挂载组件
    </p>

    <h3 class="titleCenter">组件的内联模板</h3>
    <p>在子组件中写入inline-template 那么父子组件data中的内容都可以访问，一般不用</p>
    <br>

    <h2 class="titleCenter">其他$nextTick</h2>

    dom更新完成后操作
    <div v-if="showDiv" id="name">这是一段文本</div>
    <el-button size="small" type="success" @click="getDivContent">获取div内容</el-button>
  </div>
</template>

<script>
import componentChild from '@/views/Vue/ComponentStudy/componentChild'
export default {
  name: 'componentUse',
  components: {
    componentChild
  },
  data () {
    return {
      showDiv: false
    }
  },
  methods: {
    getDivContent () {
      this.showDiv = true
      this.$nextTick(function () {
        var aaa = document.getElementById('name').innerHTML
        //console.log(aaa) //此时aaa才不会为null
      })


    }
  }

}
</script>

<style>
</style>
